<template>
  <el-card>
    <template #header>
      <div class="card-header">机构分布地图</div>
    </template>
    <div ref="chartRef" class="china-map-container"></div>
  </el-card>
</template>

<script setup>

//vue echarts  
//https://blog.csdn.net/n_2021/article/details/132836912

import { ref, onMounted, onUnmounted, shallowRef } from "vue";
import * as echarts from "echarts";
import chinaJson from "../../assets/json/china.json"; // 需要单独获取中国地图JSON数据
import { getCompanyCounts } from "../../apis/count/count";
const chartRef = ref(null);
const chartInstance = shallowRef(null);

// 初始化图表
const initChart = async () => {

  
  if (!chartRef.value) return;

  let companyData = [];
  // [
  //         { name: "拉萨", value: [91.23, 29.5, 2333] },
  //         { name: "哈尔滨", value: [128.03, 47.01, 1007] },
  //       ]
  //调接口返回地图数据 并进行格式处理
  const res = await getCompanyCounts();
 
  companyData = res.map((item) => ({
    name: item.name,
    value: [...item.lngLat.split(","), item.count],
  }));

 
  // if(!chartInstance.value){
  chartInstance.value = echarts.init(chartRef.value); // 初始化图表实例
  // }

  // 注册中国地图
  echarts.registerMap("china", chinaJson);

  // 配置项
  const option = {
    geo: {
      map: "china",
      roam: true, // 允许缩放拖动
      label: {
        show: false, // 显示省份名称
        color: "#333",
      },
      //对应的名字映射
      nameMap: {
        澳门特别行政区: "澳门",
        广西壮族自治区: "广西",
        西藏自治区: "西藏",
        宁夏回族自治区: "宁夏",
        青海省: "青海",
        甘肃省: "甘肃",
        新疆维吾尔自治区: "新疆",
        内蒙古自治区: "内蒙古",
        河北省: "河北",
        山西省: "山西",
        辽宁省: "辽宁",
        吉林省: "吉林",
        黑龙江省: "黑龙江",
        江苏省: "江苏",
        浙江省: "浙江",
        安徽省: "安徽",
        福建省: "福建",
        江西省: "江西",
        山东省: "山东",
        河南省: "河南",
        湖北省: "湖北",
        湖南省: "湖南",
        广东省: "广东",
        海南省: "海南",
        四川省: "四川",
        贵州省: "贵州",
        云南省: "云南",
        陕西省: "陕西",
      },
      itemStyle: {
        areaColor: "#409efe", // 区域颜色
        borderColor: "#c9cacd", // 边界线颜色
        borderWidth: 1,
      },
      emphasis: {
        // 高亮状态
        label: {
          color: "#fff",
        },
        itemStyle: {
          areaColor: "#2973b8",
        },
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        return params.name + "<br/>机构数量：" + params.value[2];
      },
    },
    series: [
      {
        name: "机构数量分布",
        coordinateSystem: "geo",
        type: "scatter",
        label: {
          show: true,
          color: "#000000",
          formatter: "{b}",
        },

        itemStyle: {
          normal: {
            color: "#c23531",
          },
          emphasis: {
            borderColor: "#fff",
            borderWidth: 1,
            opacity: 0.5,
          },
        },
        // 自定义名称映射
        symbolSize: 12,
        data: companyData,
      },
    ], // 可以添加其他数据系列
  };

  chartInstance.value.setOption(option);
  window.addEventListener("resize", handleResize);
};

// 响应式调整
const handleResize = () => {
  chartInstance.value?.resize();
};

// 初始化图表
onMounted(() => {
  initChart();
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  chartInstance.value?.dispose();
});
</script>

<style scoped>
.china-map-container {
  width: 100%;
  height: 400px;
}
</style>
